<template>
  <div>
    <!--    <el-form-item label="显示投票结果" v-if="activeData.config.optionType === 'default'">-->
    <!--      <el-switch v-model="activeData.config.showVoteResult" />-->
    <!--    </el-form-item>-->

    <el-form-item>
      <span slot="label">
        其他选项必填
        <el-tooltip
          class="item"
          content='如果选项中开启"其他"选项，此属性控制该值是否必填'
          effect="dark"
          placement="top-start"
        >
          <i class="el-icon-question" />
        </el-tooltip>
      </span>

      <el-switch v-model="activeData.config.otherRequired" />
    </el-form-item>

    <el-form-item label="至少应选">
      <span slot="label">
        至少应选
        <el-tooltip
          class="item"
          content="至少应选需要和最多可选一起使用，并且小于最多可选，否则将导致多选无法选中"
          effect="dark"
          placement="top-start"
        >
          <i class="el-icon-question" />
        </el-tooltip>
      </span>
      <el-input-number
        :min="0"
        :value="activeData.min"
        placeholder="至少应选"
        @input="$set(activeData, 'min', $event ? $event : undefined)"
      />
    </el-form-item>
    <el-form-item label="最多可选">
      <el-input-number
        :min="0"
        :value="activeData.max"
        placeholder="最多可选"
        @input="$set(activeData, 'max', $event ? $event : undefined)"
      />
    </el-form-item>

    <el-form-item label="排列方式">
      <el-radio-group v-model="activeData.config.inline">
        <el-radio-button :label="true"> 横向 </el-radio-button>
        <el-radio-button :label="false"> 纵向 </el-radio-button>
      </el-radio-group>
    </el-form-item>

    <!--    <el-form-item
      v-if="activeData.config.optionType !== undefined"
      label="选项样式"
    >
      <el-radio-group v-model="activeData.config.optionType">
        <el-radio-button label="default"> 默认 </el-radio-button>
        <el-radio-button label="button"> 按钮 </el-radio-button>
      </el-radio-group>
    </el-form-item>-->

    <el-form-item>
      <span slot="label">
        多选互斥
        <el-tooltip
          class="item"
          content="设置多选互斥后，将不可以选择其他选项。例如选择「以上都不是」。"
          effect="dark"
          placement="top-start"
        >
          <i class="el-icon-question" />
        </el-tooltip>
      </span>
      <el-switch v-model="activeData.config.withExclusiveChoice" />
    </el-form-item>

    <el-form-item class="exclusive-choice-api-codes" v-if="activeData.config.withExclusiveChoice">
      <el-select v-model="activeData.config.exclusiveChoiceApiCodes" multiple placeholder="请选择">
        <el-option v-for="item in activeData.config.options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>

    <!--    <el-form-item label="名额设置">-->
    <!--      <div class="cp" @click="$refs.optionQuotaDialog.openQuotaSetting()">-->
    <!--        <el-button size="mini" type="primary" v-if="isQuotaSetting">已设置</el-button>-->
    <!--        <el-button size="mini" v-else>未设置</el-button>-->
    <!--      </div>-->
    <!--    </el-form-item>-->
    <!--    <option-quota :active-data.sync="activeData" ref="optionQuotaDialog" />-->
    <config-item-option :active-data="activeData" />
  </div>
</template>

<script>
import ConfigItemOption from './option'
import OptionQuota from './optionQuota'

export default {
  name: 'ConfigItemCheckbox',
  components: {
    OptionQuota,
    ConfigItemOption
  },
  props: ['activeData'],
  data() {
    return {
      dialogVisible: false
    }
  },
  created() {
    if (!Object.hasOwnProperty.call(this.activeData.config, 'withExclusiveChoice')) {
      this.activeData.config.withExclusiveChoice = false
      this.activeData.config.exclusiveChoiceApiCodes = []
      this.activeData.config.quotaBlankWarning = ''
      this.activeData.config.quotaCycleRule = 'fixed'
      this.activeData.config.hideQuota = false
      this.activeData.config.hideChoiceWhenQuotaEmpty = false
      this.activeData.config.quotaRecoverable = true
    }
  },
  computed: {
    isQuotaSetting() {
      const arr = this.activeData.config.options.filter((e) => {
        return typeof e.quotaSetting === 'number'
      })
      return arr.length
    }
  }
}
</script>

<style scoped lang="scss">
.exclusive-choice-api-codes {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
    .el-select {
      width: 100%;
    }
  }
}
</style>
